<template>
  <div class="audition276">
    <p>1、babel编译</p>
    <p> 当我们对代码进行编译的时候，babel会将我们在组件中编写的jsx代码转化为React.createElement的表达式，<br/>createElement方法有三个参数，分别为type(元素类型）、attributes(元素所有属性)、children(元素所有子节点)；</p>
    <p><br></p>
    <p>2、生成element</p>
    <p> 当render方法被触发以后，createElement方法会执行，返回一个element对象，<br/>这个对象描述了真实节点的信息，其实就是虚拟dom节点；</p>
    <p><br></p>
    <p>3、生成真实节点(初次渲染)</p>
    <p>这时候我们会判断element的类型，<br/>如果是null、false则实例一个ReactDOMEmptyComponent对象; <br/>是string、number类型的话则实例一个ReactDOMTextComponent对象；<br/> 如果element是对象的话，会进一步判断type元素类型，是原生dom元素，则实例化ReactDOMComponent； <br/>如果是自定义组件，则实例化ReactCompositeComponentWrapper；<br/>
        在这些类生成实例对象的时候，在其内部会调用 mountComponent方法，<br/>这个方法里面有一系列浏览器原生dom方法，可以将element渲染成真实的dom并插入到文档中；</p>
    <p><br></p>
    <p>4、生命周期</p>
    <p>static getDerivedStateFromProps(props, state) 初始挂载和后续更新时调用</p>
    <p>componentDidMount: 挂载后立即调用</p>
    <p>componentDidUpdate: 数据更新时调用，首次渲染不调用</p>
    <p>conponentWillUnmount: 组件销毁前调用</p>
  </div>
</template>

<script>
export default {
  name: 'Audition276'
}
</script>

<style>

</style>